<!-- <teleport></teleport> 组件的应用开始啦 -->
<template>
  <div class="app">
    <base-model
      model-type="danger"
      ref="baseModel1"
    >
        <template #title>
          <span>This is a Danger Model!</span>
        </template>
        <template #default>
            <span>This is My Danger content!</span>
        </template>
    </base-model>

    <base-model
      model-type="success"
      ref="baseModel2"
    >
      <template #title>
        <span>This is a Success Model!</span>
      </template>
      <template #default>
        <span>This is My Success content!</span>
      </template>
    </base-model>
    <div class="btn-group">
      <button class="btn" @click="openDangerModel">open danger Model</button>
      <button class="btn" @click="openSuccessModel">open success Model</button>
    </div>
  </div>
</template>

<script>
import BaseModel from './components/BaseModel.vue';

//  danger : red
//  success: orange
export default {
  name: 'App',
  components: {
    BaseModel
  },
  methods: {
    openDangerModel() {
      // 使用ref实现父组件调用子组件的方法
      this.$refs.baseModel1.openTip();
    },
    openSuccessModel() {
      this.$refs.baseModel2.openTip();
    }
  }
}
</script>

<style>
.btn {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin: 20px;
  color: aliceblue;
  font: 16px;
  background-color: pink;
}
</style>
<!-- <teleport></teleport> 组件的应用开始啦 -->
